<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<div class="lg:container lg:mx-auto">
  <div class="home-margin grid grid-cols-1">
    <!-- Video Homepage -->
    <ng-container *ngIf="isLoading && !isImageGenerating; else videoOrGallery">
      <div class="video-container">
        <div class="w-full h-full flex justify-center items-center">
          <mat-progress-spinner
            color="primary"
            mode="indeterminate"
          ></mat-progress-spinner>
        </div>
      </div>
    </ng-container>
    <ng-template #videoOrGallery>
      <!-- Loading Overlay for Image Generation -->
      <div *ngIf="isImageGenerating"
        class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-black bg-opacity-70 rounded-xl">
        <mat-progress-spinner mode="indeterminate" [diameter]="50" color="primary"></mat-progress-spinner>
        <p class="!mt-6 text-white text-lg">
          Generating Images...
        </p>
        <p class="text-gray-400 text-sm">
          This may take a few moments. You can safely navigate away.
        </p>
      </div>

      <ng-container
        *ngIf="
          (imagenDocuments?.presignedUrls?.length || 0) === 0;
          else imageGallery
        "
      >
        <div class="video-container">
          <!-- Text for Tablet and beyond -->
          <div
            class="hidden md:flex justify-center items-center w-full h-full absolute"
          >
            <mat-icon
              svgIcon="white-gemini-spark-icon"
              class="!w-12 !h-12 mr-2 md:mr-[1rem] !z-[50]"
            ></mat-icon>
            <h1
              class="text-center justify-center text-white text-2xl font-bold !m-0 !z-[50]"
            >
              Welcome to Creative Studio
            </h1>
          </div>
          <div
            class="gradient-bg hidden md:block !relative !w-full !h-full !z-[10]"
          >
            <svg xmlns="http://www.w3.org/2000/svg">
              <defs>
                <filter id="goo">
                  <feGaussianBlur
                    in="SourceGraphic"
                    stdDeviation="10"
                    result="blur"
                  />
                  <feColorMatrix
                    in="blur"
                    mode="matrix"
                    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
                    result="goo"
                  />
                  <feBlend in="SourceGraphic" in2="goo" />
                </filter>
              </defs>
            </svg>
            <div class="gradients-container absolute top-0 left-0">
              <div class="g1"></div>
              <div class="g2"></div>
              <div class="g3"></div>
              <div class="g4"></div>
              <div class="g5"></div>
              <div #interactiveBubble class="interactive"></div>
            </div>
          </div>

          <!-- Text for mobile -->
          <div class="flex justify-center items-center w-full h-full md:hidden">
            <!-- As this svg uses a gradient, it needs to have a different fill id, therefore we have one for mobile and other for larger devices -->
            <mat-icon
              svgIcon="mobile-white-gemini-spark-icon"
              class="!w-6 !h-6 mr-2 md:mr-[1rem]"
            ></mat-icon>
            <div
              class="text-center justify-center text-white title-font font-bold"
            >
              Welcome to Creative Studio
            </div>
          </div>
        </div>
      </ng-container>
      <!-- Image Gallery -->
      <ng-template #imageGallery>
        <div class="grid grid-cols-1 gap-4">
          <app-media-lightbox
            *ngIf="imagenDocuments"
            [mediaItem]="imagenDocuments"
            [initialIndex]="0"
            [showSeeMoreInfoButton]="true"
            [showEditButton]="true"
            [showGenerateVideoButton]="true"
            [showVtoButton]="true"
            (editClicked)="editResultImage($event)"
            (generateVideoClicked)="generateVideoWithImage($event)"
            (sendToVtoClicked)="sendToVto($event)"
            style="max-height: 60vh"
          ></app-media-lightbox>
        </div>
      </ng-template>
    </ng-template>

    <!-- Control Options -->
    <div
      class="control-options inline-flex justify-center items-start grid grid-cols-2 md:grid-cols-3 lg:flex gap-4 mt-8 place-items-center"
    >


      <div
        matTooltip="Select Style"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="imageStylingMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon>style</mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          {{ searchRequest.style ? searchRequest.style : 'Style' }}
        </div>
        <mat-menu #imageStylingMenu="matMenu">
          <button
            *ngFor="let style of imageStyles"
            mat-menu-item
            [ngClass]="{'menu-item-selected': searchRequest.style === style}"
            (click)="selectImageStyle(style)"
          >
            <span>{{ style }}</span>
          </button>
        </mat-menu>
      </div>

      <div
        matTooltip="Select Color & Tone"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="colorMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon>palette</mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          {{
            searchRequest.colorAndTone
              ? searchRequest.colorAndTone
              : 'Color & Tone'
          }}
        </div>
        <mat-menu #colorMenu="matMenu">
          <button
            *ngFor="let color of colorsAndTones"
            mat-menu-item
            [ngClass]="{
              'menu-item-selected': searchRequest.colorAndTone === color,
            }"
            (click)="selectColor(color)"
          >
            <span>{{ color }}</span>
          </button>
        </mat-menu>
      </div>

      <div
        matTooltip="Select Lighting"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="lightingMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon svgIcon="lighting-icon"></mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          {{ searchRequest.lighting ? searchRequest.lighting : 'Lighting' }}
        </div>
        <mat-menu #lightingMenu="matMenu">
          <button
            *ngFor="let light of lightings"
            mat-menu-item
            [ngClass]="{'menu-item-selected': searchRequest.lighting === light}"
            (click)="selectLighting(light)"
          >
            <span>{{ light }}</span>
          </button>
        </mat-menu>
      </div>


      <div
        matTooltip="Select Composition"
        class="cursor-pointer w-32 rounded-lg inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="compositionMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon>movie_edit</mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          {{
            searchRequest.composition
              ? searchRequest.composition
              : 'Composition'
          }}
        </div>
        <mat-menu #compositionMenu="matMenu">
          <button
            *ngFor="let comp of compositions"
            mat-menu-item
            [ngClass]="{
              'menu-item-selected': searchRequest.composition === comp,
            }"
            (click)="selectComposition(comp)"
          >
            <span>{{ comp }}</span>
          </button>
        </mat-menu>
      </div>

      <div
        matTooltip="Select Negative Phrases"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="negativePhrasesMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon>block</mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          Negative Phrases ({{ negativePhrases.length }})
        </div>
        <mat-menu #negativePhrasesMenu="matMenu" class="negative-phrases-menu">
          <div class="p-2" (click)="$event.stopPropagation()">
            <mat-form-field class="w-full">
              <mat-label>Things to avoid...</mat-label>
              <mat-chip-grid #chipGrid aria-label="Enter negative phrases">
                <mat-chip-row
                  *ngFor="let phrase of negativePhrases"
                  (removed)="removeNegativePhrase(phrase)"
                  matTooltipPosition="below"
                  class="negative-prompt-chips"
                >
                  {{ phrase }}
                  <button matChipRemove [matTooltip]="'Remove ' + phrase">
                    <mat-icon>cancel</mat-icon>
                  </button>
                </mat-chip-row>
              </mat-chip-grid>
              <input
                placeholder="New phrase..."
                [matChipInputFor]="chipGrid"
                (matChipInputTokenEnd)="addNegativePhrase($event)"
              />
            </mat-form-field>
          </div>
        </mat-menu>
      </div>

      <div
        matTooltip="Select Watermark"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <button
          mat-fab
          [matMenuTriggerFor]="watermarkMenu"
          class="!w-16 !h-16 !shadow-none text-center justify-center text-stone-300"
        >
          <mat-icon>branding_watermark</mat-icon>
        </button>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          {{ selectedWatermark }}
        </div>
        <mat-menu #watermarkMenu="matMenu">
          <button
            *ngFor="let option of watermarkOptions"
            mat-menu-item
            [ngClass]="{
              'menu-item-selected': searchRequest.addWatermark === option.value,
            }"
            (click)="selectWatermark(option)"
          >
            <span>{{ option.viewValue }}</span>
          </button>
        </mat-menu>
      </div>

      <div *ngIf="searchRequest.generationModel === 'gemini-3-pro-image-preview'" matTooltip="Enable Google Search"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center">
        <mat-slide-toggle [(ngModel)]="searchRequest.googleSearch" (ngModelChange)="saveState()"
          class="!w-16 !h-16 !shadow-none text-center !flex justify-center items-center text-stone-300">
        </mat-slide-toggle>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          Google Search
        </div>
      </div>

      <div
        matTooltip="Enable Brand Guidelines"
        class="cursor-pointer w-32 inline-flex flex-col justify-start items-center"
      >
        <mat-slide-toggle
          [(ngModel)]="searchRequest.useBrandGuidelines"
          (ngModelChange)="saveState()"
          class="!w-16 !h-16 !shadow-none text-center !flex justify-center items-center text-stone-300"
        >
        </mat-slide-toggle>
        <div class="text-center justify-center text-neutral-200 text-base mt-2">
          Brand Guidelines
        </div>
      </div>
      <!-- <div
        matTooltip="Replay Last Execution"
        class="cursor-pointer w-12 h-12 bg-black rounded-3xl flex justify-center items-center gap-2.5 overflow-hidden mt-4"
      >
        <button
          mat-fab
          class="w-6 h-6 text-center justify-center text-white text-xl"
        >
          <mat-icon>replay</mat-icon>
        </button>
      </div> -->
    </div>

    <!-- Prompt Generator -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 my-5">
      <!-- Prompt Section -->
      <div class="lg:col-span-4 flex flex-col justify-start items-center gap-4 w-full">
        <app-flow-prompt-box class="w-full max-w-2xl block" [prompt]="searchRequest.prompt"
          [aspectRatio]="selectedAspectRatio" [outputs]="searchRequest.numberOfMedia || 4" [mode]="currentMode"
          [modes]="modes" [aspectRatioOptions]="aspectRatioOptions" [generationModels]="generationModels"
          [isLoading]="isImageGenerating" [selectedGenerationModel]="selectedGenerationModel"
          [referenceImages]="referenceImages" (promptChanged)="onPromptChanged($event)"
          (aspectRatioChanged)="onAspectRatioChanged($event)" (outputsChanged)="onOutputsChanged($event)"
          (generateClicked)="onGenerateClicked()" (rewriteClicked)="onRewriteClicked()"
          (modelSelected)="onModelSelected($event)" (openImageSelectorForReference)="onOpenImageSelectorForReference()"
          (onReferenceImageDrop)="onReferenceImageDrop($event)" (clearReferenceImage)="onClearReferenceImage($event)"
          (modeChanged)="onModeChanged($event)"></app-flow-prompt-box>
      </div>
    </div>
  </div>
</div>
